<script lang="ts" setup>
import { iconList } from './iconFont'

//图标值
const inputValue = defineModel({ type: String })
//搜索
const search = ref<string>('')
//显示
const visible = ref<boolean>(false)
//主题
const themeToken = getThemeTokenHook()
//总数
const total = ref(iconList.length)
// 每页条数
const pageSize = 35
//当前页
const current = ref<number>(findPageOfType(inputValue.value, pageSize))
//数据
const dataList = ref(getPaginatedAndSearchedData(current.value, pageSize).data)
// 分页和搜索函数
function getPaginatedAndSearchedData(page, size, query?) {
  let filteredList
  if (query == undefined || query == '') {
    filteredList = [...iconList]
  } else {
    filteredList = iconList.filter((item) => item.includes(query))
  }

  const startIndex = (page - 1) * size
  const endIndex = startIndex + size
  const paginatedData = filteredList.slice(startIndex, endIndex)

  return {
    data: paginatedData,
    t: filteredList.length
  }
}
// 分页变化
function paginationChange(page) {
  dataList.value = getPaginatedAndSearchedData(page, pageSize).data
}

// 获取图片所在的页码
function findPageOfType(type, size) {
  let index = 1
  for (let i = 0; i < iconList.length; i++) {
    if (type == iconList[i]) {
      index = i
      break
    }
  }
  return Math.ceil(index / size)
}
//
function clear() {
  inputValue.value = ''
  search.value = ''
}
// 搜索变化
watch(search, (val) => {
  if (val != '') {
    current.value = 1
  }
  const { data, t } = getPaginatedAndSearchedData(current.value, pageSize, search.value)
  dataList.value = data
  total.value = val != '' ? t : iconList.length
})
</script>

<template>
  <a-input v-model:value="inputValue" disabled>
    <template #addonAfter>
      <a-dropdown v-model:open="visible" :trigger="['click']" arrow placement="bottom">
        <div style="cursor: pointer">
          <Icon v-if="inputValue" :type="inputValue as any" />
          <Icon v-else type="icon-search" />
        </div>
        <template #overlay>
          <div
            :style="{
              background: themeToken.colorBgBase,
              boxShadow: themeToken.boxShadowSecondary,
              borderRadius: themeToken.borderRadiusLG + 'px'
            }"
            class="icon-select"
          >
            <a-input v-model:value="search" placeholder="请输入搜索内容..." />
            <div v-if="dataList.length > 0" class="icon-select-container">
              <div
                v-for="item in dataList"
                :style="{
                  border:
                    '1px solid ' +
                    (inputValue === item
                      ? themeToken.colorPrimary
                      : themeToken.colorBorderSecondary),
                  color: inputValue == item ? themeToken.colorPrimary : ''
                }"
                class="icon-item"
                @click="inputValue = item"
              >
                <Icon :type="item as any" />
              </div>
            </div>
            <div v-else class="icon-list-empty">
              <a-empty />
            </div>
            <div class="icon-select-footer">
              <a-pagination
                v-model:current="current"
                :pageSize="35"
                :showSizeChanger="false"
                :total="total"
                show-less-items
                size="small"
                @change="paginationChange"
              />
              <a-button danger size="small" type="primary" @click="clear">清空</a-button>
            </div>
          </div>
        </template>
      </a-dropdown>
    </template>
  </a-input>
</template>

<style scoped>
.icon-select {
  width: 350px;
  height: 300px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .icon-select-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .icon-select-container {
    padding: 10px;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    .icon-item {
      display: flex;
      height: 32.7px;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    .icon-list-empty {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
